<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edgechrome=1">
    <meta name="renderer" content="webkit">
    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="../../../node_modules/vue/dist/vue.min.js"></script>
    <link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="../../../node_modules/element-ui/lib/index.js"></script>


    <!-- 自定义 -->
    <script src="../../../node_modules/mockjs/dist/mock.js"></script>
    <script src="../static/js/mock_config.js"></script>
    <script src="../static/js/index.js"></script>
    <script src="../static/js/outplan.js"></script>
    <link rel="stylesheet" href="../../../el_tb_Bgcolor.css">
    <style>
        /* .缺{
            color: red;
            border: 1px solid rgb(255, 255, 255);

        } */
    </style>

    <!-- PC -->
    <link rel="stylesheet" href="../static/css/outplan.css" media="only screen and (max-height:1600px) ">
</head>

<body>
    <!--主体-->
    <div class="main clearfix" id="app">

        <div class="header">
            <header>
                <div class="navbar">
                    <div class="card_T">
                        <div class="card A" style="background-color:#0b87fa;color: white;">
                            <ul>
                                <li>
                                    <h8 style="line-height: 78px;">出货计划追踪看板</h8>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="pc_content">
                        <div class="card_header">
                            <div class="card C" style="background-color: #33814e;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>出货计划</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="WaitPrtQty">{{defaultDt1.length}}单</h3>
                                    </li>
                                </ul>
                            </div>
                            <div class="card C" style="background:#d9d916;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>7天追踪缺料</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Col8Qty1" style="color: white;">0</h3>
                                    </li>
                                </ul>
                            </div>

                        </div>
                        <div class="card_header">
                            <div class="card C" style=" background: #FF0000;">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item">
                                        <h4>出货逾期</h4>
                                    </li>
                                    <li class="list-group-item1">
                                        <h3 id="Waitcompleted" style="color: white;">0</h3>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
        </div>

        <div class="main-left">
            <div class="border-container">
                <div>
                    <el-table :data="defaultDt1" :default-sort="{prop: 'date', order: 'descending'}" stripe="true"
                        ref="defaultDt1" :height=el_table_height cell-style="font-size: 18px"
                        :cell-style="{ textAlign: 'center' }">
                        <el-table-column prop="SLSP" align="center" label="出货计划">
                        </el-table-column>
                        <el-table-column prop="Name" align="center" label="业务跟单">
                        </el-table-column>
                        <el-table-column prop="GoodsName" align="center" label="产品名称">
                        </el-table-column>
                        <el-table-column prop="DelyDate" align="center" label="出货交期">
                        </el-table-column>
                        <el-table-column align="center" label="待出货天数">
                            <template slot-scope="scope">
                                <div v-html="ZScutout(scope)">
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="WaitQty" align="center" label="待出货数量">
                        </el-table-column>
                        <el-table-column align="center" label="当前库存数">
                            <template slot-scope="scope">
                                <div v-html="Quantity(scope)">
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="zhishi" align="center" label="指示生产中">
                        </el-table-column>
                        <el-table-column prop="MinEnddate"  align="center" label="临近完工时间">
                        </el-table-column>
                        <el-table-column align="center" label="当前生产状态">
                            <template slot-scope="scope">
                                <div v-html="State(scope)">
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Tol" align="center" label="待指示生产数">
                        </el-table-column>
                        <el-table-column align="center" label="材料齐套">
                            <template slot-scope="scope">
                                <!-- <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top"> -->
                                    <div v-html="Lack(scope)">
                                    </div>
                                <!-- </el-tooltip> -->
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <span class="top-left border-span"></span>
                <span class="top-right border-span"></span>
                <span class="bottom-left border-span"></span>
                <span class="bottom-right border-span"></span>
            </div>
        </div>
    </div>

</body>



<script>
    new Vue({
        el: '#app',
        data() {
            return {
                el_table_height: 870,
                defaultDt1: [],
            }
        },
        methods: {
            tableRowClassName({
                row,
                rowIndex
            }) {
                if (row.Stauts == "open") {
                    return 'open';
                } else {
                    return 'close';
                }
                if (row.ShowText == "逾") {
                    return 'aa';
                }
            },
            GetTabelDate(that) {
                //出货逾期
                GetCodeData("VB22031814433550", "Get", "OrderOut").then(function (res) {
                    $('#Waitcompleted').text("" + res.rows[0].YQty + "单")
                })
                //当前缺料
                GetCodeData("VB22032210011497", "Get", "OrderOut").then(function (res) {
                    $('#Col8Qty1').text("" + res.rows[0].MatlQtyShortType + "款")
                })
                //出货计划追踪
                GetCodeData("VB22031415403280", "Get", "OrderOut").then(function (res) {
                    that.defaultDt1 = res.rows
                })
            },
            ZScutout(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.ShowText + cellValue.row.days;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.Stauts == 'open') {
                        _color = "#00a000";
                    } else if (cellValue.row.Stauts == 'close') {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    _html += ("<div  style='border-radius:15px;position: relative; width:65px;padding: 0px;background:#4199fe;overflow: hidden;height:28px;'><div style='border-radius:15px;width: 100%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                        "</div>" +
                        "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:white;font-size: 16px;'>" + cellValue.row.ShowText + cellValue.row.days +"天"+ "</div>" +
                        "</div>" +
                        "");

                    return _html;
                }
            },
            State(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.PrtStatus;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.PrtStatus == "正常") {
                        _color = "#00a000";
                    } else if (cellValue.row.PrtStatus == "生产延期") {
                        _color = "#FF0000";
                    }else if (cellValue.row.PrtStatus == "排单延期") {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    if (cellValue.row.PrtStatus == "正常" || cellValue.row.PrtStatus == "生产延期" || cellValue.row.PrtStatus == "排单延期") {
                        _html += ("<div  style='border-radius:15px;position: relative; width:80px;padding: 0px;background:#4199fe;overflow: hidden;height:28px;'><div style='border-radius:15px;width: 100%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:white;font-size: 16px;'>" + cellValue.row.PrtStatus + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += (cellValue.row.PrtStatus + "</div>" +
                            "");
                    }
                    return _html;
                }
            },
            Quantity(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.Qtystock;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.WaitQty < cellValue.row.Qtystock) {
                        _color = "#00DCFFE0";
                    } else if (cellValue.row.WaitQty > cellValue.row.Qtystock) {
                        _color = "#FF0000";
                    }
                    if (cellValue.row.WaitQty > cellValue.row.Qtystock) {
                        _html += (
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:" + _color + ";font-size: 20px;font-weight:600;'>" + cellValue.row.Qtystock + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += (
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:" + _color + ";font-size: 16px;'>" + cellValue.row.Qtystock + "</div>" +
                            "</div>" +
                            "");
                    }

                    return _html;
                }
            },
            Lack(cellValue) {
                let _html = "";
                if (cellValue) {
                    _html += "<div>"
                    var _width1 = 100;
                    var _color = "";
                    _width1 = cellValue.row.IsShortMatl;
                    if (_width1 > 100) {
                        _width1 = 100;
                    }
                    if (cellValue.row.IsShortMatl == "OK") {
                        _color = "#00a000";
                    } else if (cellValue.row.IsShortMatl == "缺") {
                        _color = "#FF0000";
                    } else {
                        _color = "#008000";
                    }
                    if (cellValue.row.IsShortMatl == "OK" || cellValue.row.IsShortMatl == "缺") {
                        _html += ("<div  style='border-radius:15px;position: relative; width:60px;padding: 0px;background:#4199fe;overflow: hidden;height:28px;'><div style='border-radius:15px;width: 100%; display: block; position: relative; background: " + _color + "; color: #000; height: 40px; line-height: 40px;'>" +
                            "</div>" +
                            "<div style='border-radius:15px;position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center;color:white;font-size: 16px;'>" + cellValue.row.IsShortMatl + "</div>" +
                            "</div>" +
                            "");
                    } else {
                        _html += (cellValue.row.IsShortMatl + "</div>" +
                            "");
                    }
                    return _html;
                }
            },
        },

        mounted() {
            TableAotoRoll([this.$refs.defaultDt1])
            var that = this
            setTimeout(function () {
                that.GetTabelDate(that)
            }, 0);
            setInterval(function() {
                that.GetTabelDate(that)
            }, 1000 * 60);
        }
    })
</script>



</html>